<template>
  <div class="app-container">
    <!--第一行-->
    <el-row :gutter="20">

      <!--栅格布局4分-->
      <el-col :span="4">
        <!--字典类型卡片 -->
        <el-card class="box-card">
          <ul class="type">
            <li
              :class=" active === index ? 'active' : '' "
              v-for="(item,index) in typeDataList"
              @click="handleTypeDateClick(index,item.id)"
              :key="item.id">
              {{item.name}}
            </li>
          </ul>
        </el-card>
        <!--字典类型卡片 -->
      </el-col>
      <!--栅格布局4分--->

      <!--栅格布局20分-->
      <el-col :span="20">
        <!--字典表格卡片-->
        <el-card class="box-card">
          <!-- 按钮处理面板 -->
          <div class="btn-panel" style="margin-bottom: 10px;">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddDialog" >新 增</el-button>
            <el-button  size="mini" type="warning" icon="el-icon-edit" @click="handleUpdateDialog" >修 改</el-button>
            <el-button  size="mini" type="danger" icon="el-icon-delete" @click="handleDelete">删 除</el-button>
          </div>
          <!-- 按钮处理面板 -->

          <!--展示表格-->
          <el-table
            height="490"
            ref="multipleTable"
            :data="dataList"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe
            @selection-change="handleSelectionChange">

            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column
              label="字典键"
              prop="dictKey"
              width="170">
            </el-table-column>

            <el-table-column
              prop="dictVal"
              label="字典值"
              width="120">
            </el-table-column>

            <el-table-column
              prop="sort"
              label="字典排序号">
            </el-table-column>


            <el-table-column
              prop="status"
              label="审核状态">
              <template slot-scope="scope">
                <el-tag size="small" v-if="scope.row.status === 0" type="danger">待激活</el-tag>
                <el-tag size="small" v-else-if="scope.row.status === 1" type="success">正常</el-tag>
              </template>
            </el-table-column>

          </el-table>
          <!--展示表格-->

          <!--分页组件-->
          <el-pagination
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total,sizes, prev, pager, next, jumper">
          </el-pagination>
          <!--分页组件-->


        </el-card>
        <!--字典表格卡片-->
      </el-col>
      <!--栅格布局20分-->

    </el-row>
    <!--第一行-->
    <!--新增字典对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
      width="600px"
      :before-close="handleAddFormClose">

      <el-form :model="formData" :rules="rule" ref="dataAddForm">


        <el-form-item label="字典类型" prop="typeId" label-width="100px">
          <el-select v-model="formData.typeId" placeholder="字典类型">
            <el-option  :key="item.id" v-for="item in typeDataList" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="字典键" prop="dictKey" label-width="100px">
          <el-input v-model="formData.dictKey" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典值"  prop="dictVal" label-width="100px">
          <el-input v-model="formData.dictVal" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="排序号"  prop="sort" label-width="100px">
          <el-input v-model="formData.sort" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增字典对话框-->

    <!--修改字典对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible4Edit"
      width="600px"
      :before-close="handleEditFormClose">

      <el-form :model="formData" :rules="rule" ref="dataEditForm">

        <el-form-item label="字典类型" prop="typeId" label-width="100px">
          <el-select v-model="formData.typeId" placeholder="字典类型">
            <el-option  :key="item.id" v-for="item in typeDataList" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="字典键" prop="dictKey" label-width="100px">
          <el-input v-model="formData.dictKey" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典值"  prop="dictVal" label-width="100px">
          <el-input v-model="formData.dictVal" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="排序号"  prop="sort" label-width="100px">
          <el-input v-model="formData.sort" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改字典对话框-->

  </div>
</template>

<script>
  import {save,findById,update,deleteDict,findByPage} from "@/api/dict";
  import {findAll} from "@/api/type";
export default {
  name: "index",
  data() {
    return {
      pagination: {
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
        queryParams:{}//查询条件
      },//分页数据模型数
      selectNodeID:1,//选择字典类型的ID
      typeDataList:[], //子典类型要展示的数据
      dataList: [],//当前页要展示的分页列表数据
      formData: {},//表单数据
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Edit:false,//详情表单是否可见
      active:0, //默认高亮第一个
      multipleSelection: [], //选中项数据的数组
      rule: {
        dictKey: [{required: true, message: '请输入字典的键', trigger: 'blur'}],
        dictVal: [{required: true, message: '请输入字典的值', trigger: 'blur'}],
        sort: [{required: true, message: '请输入排序号', trigger: 'blur'}],
        typeId: [{required: true, message: '请选择字典所属类型', trigger: 'blur'}],
        status: [{required: true, message: '字典的状态不能为空', trigger: 'blur'}],
      },//表单的校验规则
    }
  },
  created() {
    this.findAllDictType()
    this.findDictListByPage()
  },
  methods: {
    //弹出新增表单窗口的方法
    handleAddDialog() {
      this.resetForm();
      this.dialogFormVisible = true;
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行添加字典....】")
      this.$refs[formName].validate((valid) => {
        if (valid) {//成功
          //发送请求
          save(this.formData).then(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.handleCurrentChange(1)
              }
            });
          })
          this.dialogFormVisible = false;
          this.handleCurrentChange(1)
        }
      });
      console.info("【======系统增加字典成功！====】")
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //弹出编辑窗口的方法
    handleUpdateDialog() {
      if (this.multipleSelection.length === 1) {
        console.info("【====系统正在弹出的修改字典窗口====】")
        this.resetForm();
        this.dialogFormVisible4Edit = true;
        //获取到字典ID
        const dictId = this.multipleSelection[0].id
        //发送请求
        findById(dictId).then(res=>{
          this.formData = res.data;
        })
        console.info(`====【系统正在弹出的修改字典窗口成功！！并成功获取了ID为：${dictId}的字典详情=====`)
      } else {
        //弹出成功框，显示成功信息
        this.$message({
          showClose: true,
          message: '请选择一行数据修改',
          type: 'warning',
          onClose: () => {
            this.findDictListByPage()
          }
        });
        this.findDictListByPage()
      }


    },
    //处理修改的方法
    handleEdit(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改咨询....】")
        if (valid) {
          update(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.handleCurrentChange(1);
              }
          })
            this.dialogFormVisible4Edit = false
            this.handleCurrentChange(1);
            console.info("【系统成功修改咨询....】")
          });
        }
      });
    },
    //处理删除
    handleDelete() {
      if (this.multipleSelection.length === 1) {
        const dictId = this.multipleSelection[0].id
        this.$confirm(`此操作将【永久删除】该字典值吗, 是否继续？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDict(dictId).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.handleCurrentChange(1)
              }
          });
          })
        }).catch(() => {
          // 点击取消后调用
          // 空着，防止报错
        });
      }else{
        //弹出成功提示框，显示成功信息
        this.$message({
          showClose: true,
          message: '请选择一行数据删除',
          type: 'warning',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        })
      }
    },
    //关闭修改表单窗口的方法
    handleEditFormClose() {
      this.dialogFormVisible4Edit = false
      this.resetForm();
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
    },
    //处理表格勾选
    handleSelectionChange(val) {
      //获取用户勾选想赋值数据模型multipleSelection
      this.multipleSelection = val;
      //根据选中数判断批量删除按钮是否激活
      this.delBtnStatus = val.length === 0
    },
    //查询全部字典分类的方法
    findAllDictType() {
      findAll().then(res=>{
        this.typeDataList = res.data;
      })
    },
    //处理字典类型被点击
    handleTypeDateClick(index, typeId) {
      console.log("==========当前字典类型被点击了======" + typeId)
      //设置类型激活属性为当前项索引值
      this.active = index
      this.selectNodeID = typeId
      this.findDictListByPage()
    },
    //处理分页查询字典数据的方法
    findDictListByPage() {
      this.pagination.queryParams.typeId = this.selectNodeID
      findByPage(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findDictListByPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findDictListByPage()
    },
  }
}
</script>

<style scoped>
.type{
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.type li{
  height: 40px;
  padding-left: 20px;
  line-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
}
.type .active{
  background-color: #1AA094;
  color: #ffffff;
  border-radius: 10px;
}
</style>
